<template>
    <div class="uoload_log_wp">
        <div class="tab_title">
            <span>上传日志</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-uploadlog')"></i>
        </div>
        <div class="list_item">
            <div class="name">
                <span>*</span>
                <span>日志日期：</span>
            </div>
            <input type="date" v-model="data.time">
            <span class="hint" @click="shell.openExternal('https://www.wenhua.com.cn/popwin/jietu.htm');">如何截图反应软件问题</span>
        </div>
        <div class="list_item">
            <div class="name">
                <span>*</span>
                <span>您的姓氏：</span>
            </div>
            <input type="text" v-model="data.name">
            <label>
                <input type="radio" value="先生" v-model="data.sex">
                先生
            </label>
            <label>
                <input type="radio" value="女士" v-model="data.sex">
                女士
            </label>
        </div>
        <div class="list_item">
            <div class="name">
                <span>*</span>
                <span>手机号码：</span>
            </div>
            <input type="text" v-model="data.iphone">
            <span>(只填写后四位即可)</span>
        </div>
        <div class="list_item list_item2">
            <div class="name">
                <span></span>
                <span>您的问题：</span>
            </div>
            <textarea rows="5" v-model="data.question"></textarea>

        </div>
        <div class="btns">
            <div class="zhaung_tai" v-if="isShowSuccess">
                <i v-if="isShowSuccess >= 100">上传成功!</i>
                <el-progress v-else :percentage="isShowSuccess"></el-progress>
            </div>
            <span @click="sumbit">开始上传</span>
            <span @click="ipcRenderer.send('close-uploadlog')">关闭</span>
        </div>
    </div>
</template>

<script setup>
const { ref } = require('vue');
const { ipcRenderer, shell } = require('electron');
const logHandler = require('@/utils/logHandler.js');
import { ElMessage } from 'element-plus';
import moment from 'moment'

const data = ref({
    time: moment().format('YYYY-MM-DD'),
    name: '',
    sex: '先生',
    iphone: '',
    question: '',
})
const isShowSuccess = ref(0)

function sumbit() {
    if (isShowSuccess.value && isShowSuccess.value < 100) return
    if (!data.value.time) {
        return ElMessage({ message: "请选择日期", type: 'warning' });
    }
    if (!data.value.name) {
        return ElMessage({ message: "请填写姓氏", type: 'warning' });
    }
    if (!data.value.iphone) {
        return ElMessage({ message: "请填写手机后四位", type: 'warning' });
    }
    isShowSuccess.value = 0
    logHandler.writeLog('操作', `尾号${data.value.iphone}上传${data.value.time}问题${data.value.question}`, `${data.value.name}${data.value.sex}`)
    let jishi = setInterval(() => {
        isShowSuccess.value += Math.floor(Math.random() * 20) + 1;
        if (isShowSuccess.value >= 100) {
            isShowSuccess.value = 100
            clearInterval(jishi)
        }
    }, 200);
}

</script>

<style scoped lang="less">
.uoload_log_wp {
    background-color: #f0f0f0;
    color: #000;
    height: 293px;
    width: 418px;

    .tab_title {
        background-color: #ecf7f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 25px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 25px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    .list_item {
        padding: 15px 15px 0;
        display: flex;
        align-items: center;

        >div {
            display: flex;
            align-items: center;
            padding-left: 10px;
            position: relative;

            span:nth-of-type(1) {
                color: red;
                position: absolute;
                left: 0;
            }
        }

        >input {
            width: 130px;
            margin-right: 20px;
            height: 23px;
            font-size: 12px;
        }

        .hint {
            color: #0000c0;
        }

        label {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }
    }

    .list_item2 {
        align-items: start;

        textarea {
            width: 300px;
            line-height: 18px;
            font-size: 12px;
        }
    }

    .btns {
        text-align: right;
        padding-top: 15px;
        padding-right: 30px;

        .zhaung_tai {
            float: left;
            padding-left: 25px;
            width: 180px;
            text-align: left;

            i {
                display: inline-block;
                font-style: normal;
                transform: translateY(8px);
            }
        }



        span {
            display: inline-block;
            border: 1px solid #d0d0d0;
            border-radius: 3px;
            background: #fdfdfd;
            line-height: 20px;
            width: 75px;
            text-align: center;
            margin-left: 10px;
        }

        span:hover {
            background-color: #e0eef9;
            border-color: #0078d4;
        }
    }

}
</style>
